<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/wangEditor.css" />
    <link href="css/editor-style.css" />
</head>
<style type="text/css">
    .div1 {
        margin-top: 25px;
    ;
    }

    .toolbar {
        border: 1px solid #ccc;
    }

    .text {
        border: 1px solid #ccc;
        height: 400px;
    }
</style>
<div id="div1" class="toolbar">
</div>
<div style="padding: 5px 0; color: #ccc"></div>
<div id="div2" class="text">
    <!--可使用 min-height 实现编辑区域自动增加高度-->
    <p>请输入内容</p>
</div>

<button id="btn1">获取html</button>
<button id="btn2">获取text</button>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="js/wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1', '#div2')
    // 或者 var editor = new E( document.getElementById('editor') )

    // 隐藏网络图片
    editor.customConfig.showLinkImg = false;
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgServer = '/upload';
    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            for(var j=0;j<result.data.length;j++){
                insertImg(result.data[j]);
            }
        }
    };

    editor.create();
    // 设置内容
    // editor.txt.append('<p>追加的内容</p>');

    document.getElementById('btn1').addEventListener('click', function() {
        // 读取 html
        alert(editor.txt.html())
    }, false)

    document.getElementById('btn2').addEventListener('click', function() {
        // 读取 text
        alert(editor.txt.text())
    }, false)

    // 监听上传
    // editor.customConfig.uploadImgHooks = {
    //     before: function(xhr, editor, files) {
    //         // 图片上传之前触发
    //         // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
    //
    //         // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
    //         // return {
    //         //     prevent: true,
    //         //     msg: '放弃上传'
    //         // }
    //     },
    //     success: function(xhr, editor, result) {
    //         // 图片上传并返回结果，图片插入成功之后触发
    //         // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //     },
    //     fail: function(xhr, editor, result) {
    //         // 图片上传并返回结果，但图片插入错误时触发
    //         // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //     },
    //     error: function(xhr, editor) {
    //         // 图片上传出错时触发
    //         // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //     },
    //     timeout: function(xhr, editor) {
    //         // 图片上传超时时触发
    //         // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //     },
    //
    //     // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    //     // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    //     // customInsert: function(insertImg, result, editor) {
    //     //     // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
    //     //     // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
    //     //
    //     //     // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
    //     //     var url = result.url
    //     //     console.info(url);
    //     //     insertImg(url)
    //     //
    //     //     // result 必须是一个 JSON 格式字符串！！！否则报错
    //     // }
    // }
</script>

<form action="/upload" enctype="multipart/form-data" method="post" >
    <input type="file" name="file"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>
